<template>
  <div class="expert-draw-page">
    <div class="container-content">
      <div class="title">
        <span>专家抽取管理/详情</span>
        <span @click="goBack" class="back-btn pointer"
          ><img src="../../assets/images/icon_comm_back.png" alt="" />返回</span
        >
      </div>
      <!-- 标题 基本信息-->
      <div class="right-title">
        <img src="../../assets/images/icon_16_title.png" alt="" /> 基本信息
      </div>
       <div class="table-content-box">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="评审任务名称">{{detailsData.taskName}}</el-descriptions-item>
            <el-descriptions-item label="评审类别">{{detailsData['reviewType'] == 0 ? "方案评审" : "年度计划评审"}}</el-descriptions-item>
            <!-- <el-descriptions-item label="评审时间">{{detailsData.reviewTimeStart + "-" + detailsData.reviewTimeEnd}}</el-descriptions-item> -->
            <el-descriptions-item label="评审地点">{{detailsData.reviewAddress}}</el-descriptions-item>            
          </el-descriptions>
      </div>
      <div class="right-title">
        <img src="../../assets/images/icon_16_title.png" alt="" /> 抽取规则
      </div>
      <div class="table-content-box">
        <!-- <div class="add-btn">
                    <img src="../../assets/images/icon_from_add.png" alt="">新增规则
                </div> -->
        <el-table
          :data="tableData"
          border
          v-loading="loading"
          empty-text="暂无数据"
          :max-height="450"
          style="width: 100%"
          >
          <el-table-column type="index" label="序号" align="center" width="65">
          </el-table-column>
          <el-table-column label="抽取类型" prop="extractType" align="center">
            <template slot-scope="scope">
              {{
                scope.row.extractType == 1
                  ? "条件抽取"
                  : scope.row.extractType == 2
                  ? "随机抽取"
                  : "指定专家抽取"
              }}
            </template>
          </el-table-column>
          <el-table-column label="人数" prop="peopleNumber" align="center">
          </el-table-column>
          <el-table-column
            label="抽取规则描述"
            prop="extractRuleDesc"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="right-title">
        <img src="../../assets/images/icon_16_title.png" alt="" /> 专家信息
      </div>
      <div class="table-content-box">
        <el-table
          :data="informationData"
          border
          v-loading="loading"
          empty-text="暂无数据"
          :max-height="450"
          style="width: 100%"
          >
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column
            v-for="(item, index) in informationColumn"
            :key="index"
            :label="item.label"
            :prop="item.prop"
          >
            <template slot-scope="scope">
              <span v-if="item.prop == 'sex'">{{
                sexType123[scope.row.sex]
              }}</span>
              <span v-else-if="item.prop == 'areasOfExpertise'">{{
                type123[scope.row.areasOfExpertise]
              }}</span>
              <span v-else-if="item.prop == 'extractType'">{{
                  scope.row.extractType==1?'按条件抽取':scope.row.extractType==2?"随机抽取":'指定专家抽取'
              }}</span>
              <!-- <span v-else-if="item.prop == 'technicalName'">
                <span v-for="item1 in technicalList" :key="item1.dictValue">
                  <span>{{
                    item1.dictValue == scope.row.technicalName
                      ? item1.dictLabel
                      : ""
                  }}</span>
                </span>
              </span> -->
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="receiveStatus" label="状态">
            <template slot-scope="scope">
              <!-- 0:待接受 1：已接受 2：已拒绝3:申请取消 4：同意取消-->
              <div class="state-span">
                <span class="out-line"><span></span></span>
                {{
                  scope.row.receiveStatus == 0
                    ? "待接受"
                    : scope.row.receiveStatus == 1
                    ? "已接受"
                    : scope.row.receiveStatus == 2
                    ? "已拒绝"
                    : scope.row.receiveStatus == 3 ?
                    "申请取消":'同意取消'
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="clickDetails(scope.row)"
                type="text"
                size="small"
                >详情</el-button
              >
              <el-button
                type="text"
                size="small"
                v-if="scope.row.receiveStatus==0||scope.row.receiveStatus==2||scope.row.receiveStatus==4"
                @click="clickReplace(scope.row)"  
                v-hasPermi="['expertsdraw:details:anew']"
              >重新更换</el-button>
              <el-button
                type="text"
                size="small"
                v-if="scope.row.receiveStatus==1"
                @click="clickReplace(scope.row)"
                v-hasPermi="['expertsdraw:details:temporary']"
              >临时更换</el-button>
              <el-button
                type="text"
                size="small"
                v-if="scope.row.receiveStatus == 3"
                @click="handleExamine(scope.row)"
                v-hasPermi="['expertsdraw:details:audit']"
                >审批</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="right-title">
        <img src="../../assets/images/icon_16_title.png" alt="" /> 专家确认进程
      </div>
      <div class="confirmed-box">
        <div
          class="confirmed-content"
          v-for="(n, index) in infoArrData"
          :key="index"
        >
          <div class="left-confirmed">
            <div class="left-title">{{ n.expertCourseTime.split(" ")[0] }}</div>
            <div>{{ n.expertCourseTime.split(" ")[1] }}</div>
          </div>
          <div class="right-confirmed">
            <!-- <div class="rigth-title">受理人：区大数据局</div> -->
            <div>{{ n.expertCourseDesc }}</div>
          </div>
          <!-- <div class="right_btn">
            已抽取
          </div> -->
          <div class="yuan"></div>
        </div>
        <div class="left-line"></div>
      </div>
    </div>
    <!-- 抽取弹窗 ，没有可更换数据弹出框-->
    <el-dialog
      title="编辑规则"
      :visible.sync="dialogVisible"
      width="746px"
      :before-close="handleClose"
      custom-class="dialog-box"
      :close-on-click-modal="false"
      >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        >
        <el-form-item label="抽取类型" prop="extractType">
          <el-select
            v-model="ruleForm.extractType"
            placeholder="请选择抽取类型"
            @change="changeType"
            style="width:100%"
          >
            <el-option
              v-for="(dict, index) in extractTypeData"
              :label="dict.dictLabel"
              :value="dict.dictValue"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row
          :gutter="10"
          class="mb20 mt5"
          v-show="ruleForm.extractType == 1"
        >
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="small"
              @click="addPerRow"
              >添加条件</el-button
            >
          </el-col>
        </el-row>
        <el-table
          v-loading="loading"
          :data="editPerDataList"
          v-show="ruleForm.extractType == 1"
          border
          class="info-select"
        >
          <el-table-column label="指标名称" align="center" width="168">
            <template slot-scope="scope">
              <span v-show="!scope.row.show">{{ scope.row.extracName }}</span>
              <el-select
                v-show="scope.row.show"
                v-model="scope.row.extracName"
                placeholder="请选择"
                @change="changeIndicators(scope.row)"
              >
                <el-option
                  v-for="item in perNameOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictLabel"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="规则"
            align="center"
            :show-overflow-tooltip="true"
            >
            <template slot-scope="scope">
              <div v-show="!scope.row.show || IndicatorsShow">
                {{ scope.row.peopleNumber }}
              </div>
              <div v-show="!IndicatorsShow">
                <el-select
                  v-show="scope.row.show"
                  v-model="scope.row.peopleNumber"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in contrastList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                  >
                  </el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="指标内容" align="center" width="168">
            <template slot-scope="scope">
              <span v-show="!scope.row.show">{{
                scope.row.extractRuleDesc
                  ? scope.row.extractRuleDesc.toString()
                  : ""
              }}</span>
              <!--专业  -->
              <el-select
                v-show="
                  scope.row.show &&
                  IndicatorsShow &&
                  scope.row.extracName == '专业'
                "
                v-model="scope.row.extractRuleDesc"
                placeholder="请选择专业"
                value-key="id"
                multiple
                >
                <el-option
                  v-for="item in majorList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictLabel"
                >
                </el-option>
              </el-select>
              <!-- 职业资格 -->
              <el-select
                v-show="
                  scope.row.show &&
                  IndicatorsShow &&
                  scope.row.extracName == '职业资格'
                "
                v-model="scope.row.extractRuleDesc"
                placeholder="请选择专业"
                value-key="id"
                multiple
                >
                <el-option
                  v-for="item in professionalList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictLabel"
                >
                </el-option>
              </el-select>
              <!-- 擅长领域 -->
              <el-select
                v-show="
                  scope.row.show &&
                  IndicatorsShow &&
                  scope.row.extracName == '擅长领域'
                "
                v-model="scope.row.extractRuleDesc"
                placeholder="请选择专业"
                value-key="id"
                multiple
                  >
                <el-option
                  v-for="item in areasList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictLabel"
                >
                </el-option>
              </el-select>
              <!-- 技术职称 -->
              <el-select
                v-show="
                  scope.row.show &&
                  IndicatorsShow &&
                  scope.row.extracName == '技术职称'
                "
                v-model="scope.row.extractRuleDesc"
                placeholder="请选择专业"
                value-key="id"
                multiple
                  >
                <el-option
                  v-for="item in technicalList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictLabel"
                >
                </el-option>
              </el-select>
              <!-- 正直面貌 -->
              <el-select
                v-show="
                  scope.row.show &&
                  IndicatorsShow &&
                  scope.row.extracName == '政治面貌'
                "
                v-model="scope.row.extractRuleDesc"
                placeholder="请选择专业"
                value-key="id"
                >
                <el-option
                  v-for="item in politicalOutlook"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictLabel"
                >
                </el-option>
              </el-select>
              <!-- 性别 -->
              <el-select
                v-show="
                  scope.row.show &&
                  IndicatorsShow &&
                  scope.row.extracName == '性别'
                "
                v-model="scope.row.extractRuleDesc"
                placeholder="请选择专业"
                value-key="id"
                  >
                <el-option
                  v-for="item in sexList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictLabel"
                >
                </el-option>
              </el-select>
              <el-input
                v-show="
                  scope.row.show &&
                  !IndicatorsShow &&
                  scope.row.extracName == '年龄'
                "
                v-model="scope.row.age"
                @blur="inputBlur(scope.row)"
                placeholder="请填写年龄"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            >
            <template slot-scope="scope">
              <el-button
                v-show="scope.row.show"
                size="mini"
                type="text"
                @click="handleSure(scope.row)"
                >确认</el-button
              >
              <el-button
                v-show="!scope.row.show"
                size="mini"
                type="text"
                @click="handleRowEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click.native.prevent="deleteRow(scope.$index, editPerDataList)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-form-item
          label="选择专家"
          prop="extractType"
          v-if="ruleForm.extractType == '3'"
          >
          <el-select
            v-model="ruleForm.expertIdList"
            filterable
            placeholder="请选择专家"
            clearable
            multiple
            @change="selectExpert"
            :multiple-limit="1"
            style="width:100%"
          >
            <el-option
              v-for="dict in erxtList"
              :label="dict.expertName + '  ' + dict.workUnit"
              :value="dict.expertId"
              :key="dict.expertId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">抽 取</el-button>
      </span>
    </el-dialog>
    <!-- 重新更換 -->
    <el-dialog
      title="更换专家"
      :visible.sync="dialogShow"
      width="1100px"
      :before-close="handleClose"
      custom-class="dialog-box"
      >
      <div class="person-info">
        <div class="person-left">
          <img
            src="../../assets/images/icon_expert-boy.png"
            alt=""
          >
          <div class="name-title">
            <!-- {{item.expertName}} -->
            {{changeExpertInfo.expertName}}
          </div>
        </div>
        <div class="person-right">
          <el-descriptions border :column="3">
            <el-descriptions-item
              label="性别："
              label-class-name="descriptions-item-label "
              content-class-name="el-descriptions-itemcontent "
              >
              <span>{{changeExpertInfo.sex==='0'?'男':changeExpertInfo.sex==='1'?'女':''}}</span>
            </el-descriptions-item>
            <el-descriptions-item
              label="毕业学校："
              label-class-name="descriptions-item-label "
              content-class-name="el-descriptions-itemcontent "
              >
              <span>{{changeExpertInfo.graduateCollege}}</span>
            </el-descriptions-item>
            <el-descriptions-item
              label="工作单位："
              label-class-name="descriptions-item-label "
              content-class-name="el-descriptions-itemcontent "
              >
              <span>{{changeExpertInfo.workUnit}}</span>
            </el-descriptions-item>
            <el-descriptions-item
              label="政治面貌："
              label-class-name="descriptions-item-label "
              content-class-name="el-descriptions-itemcontent "
              >
              <span>{{changeExpertInfo.politicalOutlook==='0'?'群众':changeExpertInfo.politicalOutlook==='1'?'党员':''}}</span>
            </el-descriptions-item>
            <el-descriptions-item
              label="专业："
              label-class-name="descriptions-item-label "
              content-class-name="el-descriptions-itemcontent "
              >
              <span>{{changeExpertInfo.major}}</span>
            </el-descriptions-item>
            <el-descriptions-item
              label="职位："
              label-class-name="descriptions-item-label "
              content-class-name="el-descriptions-itemcontent "
              >
              <span>{{changeExpertInfo.post}}</span>
            </el-descriptions-item>
            <el-descriptions-item
              label="年龄："
              label-class-name="descriptions-item-label "
              content-class-name="el-descriptions-itemcontent "
              >
              <span>{{changeExpertInfo.age}}</span>
            </el-descriptions-item>
            <el-descriptions-item
              label="学历："
              label-class-name="descriptions-item-label "
              content-class-name="el-descriptions-itemcontent "
              >
              <span>{{changeExpertInfo.education}}</span>
            </el-descriptions-item>
            <el-descriptions-item
              label="擅长领域："
              label-class-name="descriptions-item-label "
              content-class-name="el-descriptions-itemcontent "
              >
              <span>{{changeExpertInfo.areasOfExpertise}}</span>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions border :column="1">
            <el-descriptions-item
              label="技术职称："
              label-class-name="descriptions-item-label "
              content-class-name="el-descriptions-itemcontent"
              >
              <span>{{changeExpertInfo.technicalTitlesName}}</span>
            </el-descriptions-item>
            <el-descriptions-item
              label="职业职称："
              label-class-name="descriptions-item-label "
              content-class-name="el-descriptions-itemcontent"
              >
              <span>{{changeExpertInfo.qualificationsName}}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <span>重新抽取次数不能超过两次，否则将视为违规</span> -->
        <el-button @click="handleClose">取 消</el-button>
        <el-button class="resturn" :disabled="this.checkNum>1||isDisabled" @click="replaceChange">重新抽取</el-button>
        <el-button
          type="primary"
          @click="confirmChange"
        >确认更换</el-button>
      </span>
    </el-dialog>
    <!-- 申请取消 -->
    <el-dialog
      title="审批请求"
      :visible.sync="approvalShow"
      width="628px"
      :before-close="handleClose"
      custom-class="dialog-box"
      >
      <el-form
        :model="approvalForm"
        ref="approvalForm"
        :rules="approvalFormRule"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="申请理由">
          <el-input
            type="textarea"
            disabled
            v-model="approvalForm.applyReason"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否同意" prop="approvalResult">
          <el-radio-group v-model="approvalForm.approvalResult">
            <el-radio :label="1">同意取消</el-radio>
            <el-radio :label="2">不同意</el-radio>
            <!-- <el-radio :label="3">退回重申</el-radio> -->
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="determine">确定</el-button>
      </span>
    </el-dialog>
    <!-- 临时更换，按照条件弹出框 -->
    <el-dialog
      title="更换专家"
      :visible.sync="expertShow"
      width="700px"
      :before-close="handleClose"
      top="12"
      >
      <el-form
        v-model="changeForm"
        ref="changeFormRef"
        :rules="changeFormRule"
        label-width="100px"
        class="demo-ruleForm"
      >
      <el-form-item label="抽取类型" prop="extractType">
          <el-select
            v-model="changeForm.extractType"
            placeholder="请选择抽取类型"
            disabled
          >
            <el-option
              v-for="(dict, index) in extractTypeData"
              :label="dict.dictLabel"
              :value="dict.dictValue"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择专家" prop="expertId">
          <el-select
            v-model="changeForm.expertId"  
            placeholder="请选择专家"
            clearable
            multiple
            :multiple-limit="1"
          >
            <el-option
              v-for="dict in erxtList"
              :label="dict.expertName + '  ' + dict.workUnit"
              :value="dict.expertId"
              :key="dict.expertId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitChange">确定更换</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDetailTask,
  getExtractManageDetails,
  getExtInfoList,
  getExchangeExpert,
  getConfirmChange,
  getModifyRule,
  getUnextractedExpert,
  getBeginExtract,
  getExtractExpert,
  getExtractExpertApproval,
  geMonitoringAdd,
  getExtractRule,
} from "@/api/manage/manage";
export default {
  data() {
    return {
      rules: {
        region: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      changeFormRule:{
        // extractType:[
        //   { required: true, message: "请选择抽取类型", trigger: "change" },
        // ],
        // expertId:[
        //   { required: true, message: "请选择专家", trigger: "change" },
        // ]
      },//更换指定专家
      approvalFormRule:{
        approvalResult:[
          { required: true, message: "请选择是否同意", trigger: "change" },
        ]
      },//审批
      ruleForm: {},
      changeForm:{
        extractType:null,
        expertId:null,
      },//更换指定专家
      approvalForm:{
        approvalResult:''
      },//审批
      infoData: [
        { label: "评审任务名称", value: "taskName" },
        { label: "评审类别", value: "reviewType" },
        { label: "评审时间", value: "time" },
        { label: "评审地点", value: "reviewAddress" },
      ],
      //抽取规则数据
      tableData: [],
      tableColumn: [
        { label: "抽取类型", prop: "" },
        { label: "人数", prop: "" },
        { label: "抽取规则描述", prop: "" },
      ],
      //专家信息
      informationData: [],
      informationColumn: [
        { label: "抽取类型", prop: "extractType"},
        { label: "姓名", prop: "expertName" },
        { label: "性别", prop: "sex" },
        { label: "职称", prop: "technicalName" },
        { label: "年龄", prop: "age" },
        { label: "工作单位", prop: "workUnit" },
        { label: "擅长领域", prop: "areasOfExpertise" },
      ],
      dialogVisible: false,//更换专家
      dialogShow: false,//修改规则
      expertShow:false,//指定专家弹出
      loading: false,
      detailsData: {}, //页面数据信息
      infoArrData: [], //专家确认进程
      //默认规则数据
      editPerDataList: [
        {
          extractType: "",
          extracName: "专业",
          peopleNumber: "=",
          extractRuleDesc: [],
          age: "",
          show: false,
        },
        {
          extractType: "",
          extracName: "擅长领域",
          peopleNumber: "=",
          extractRuleDesc: [],
          age: "",
          show: false,
        },
        {
          extractType: "",
          extracName: "技术职称",
          peopleNumber: "=",
          extractRuleDesc: [],
          age: "",
          show: false,
        },
        {
          extractType: "",
          extracName: "职业资格",
          peopleNumber: "=",
          extractRuleDesc: [],
          age: "",
          show: false,
        },
      ],
      isMultiple: false, //是否多选指标内容
      extractTypeData: [], //抽取规则
      erxtList: [], //专家信息数组
      approvalShow: false, //审批请求弹窗
      infodata: [],
      // 是否显示弹出窗
      openView: false,
      openEdit: false,
      openRule: false,
      // 配置抽取规则
      // editPerDataList:[],
      // 配置规则数据
      performanceRules: [],
      IndicatorsShow: true,
      //指标名称
      perNameOptions: [
        { dictLabel: "性别", dictValue: "sex" },
        { dictLabel: "政治面貌", dictValue: "politicalOutlook" },
        { dictLabel: "年龄", dictValue: "age" },
        { dictLabel: "专业", dictValue: "major" },
        { dictLabel: "擅长领域", dictValue: "areasOfExpertise" },
        { dictLabel: "技术职称", dictValue: "technicalTitles" },
        { dictLabel: "职业资格", dictValue: "qualifications" },
      ],
      type123: {
        0: "土木工程",
        1: "财务",
        2: "环境保护",
        3: "计算机技术",
        4: "机械工程",
      },
      sexType123: {
        0: "男",
        1: "女",
      },
      //规则下拉框
      contrastList: [
        { dictLabel: ">", dictValue: "0" },
        { dictLabel: "=", dictValue: "2" },
        { dictLabel: "<", dictValue: "1" },
      ],
      //条件
      conditionOptions: [
        { dictValue: "大于", dictLabel: "大于" },
        { dictValue: "大于等于", dictLabel: "大于等于" },
        { dictValue: "等于", dictLabel: "等于" },
        { dictValue: "小于等于", dictLabel: "小于等于" },
        { dictValue: "小于", dictLabel: "小于" },
      ],
      //指标内容的下拉选择数据
      optionsArr: [],
      majorList: [], //专业列表
      technicalList: [], //技术职称列表
      professionalList: [], //职业资格列表
      areasList: [], //擅长列表
      politicalOutlook: [
        { dictLabel: "群众", dictValue: "0" },
        { dictLabel: "党员", dictValue: "1" },
      ], //政治面貌列表
      sexList: [
        { dictLabel: "男", dictValue: "0" },
        { dictLabel: "女", dictValue: "1" },
      ], //性别列表
      changeExpertInfo:{},
      extractExpertId:'',//更换专家确认，规则表id
      expertId:'',//更换专家确认，专家id
      checkNum:0,//重新抽取次数
      clickType:0,//
      temporaryData:{},//修改了规则时，保存的规则
      selectExpertList:'',
      extractRuleDesc:'',//规则描述
      selecType:null,//抽取类型描述
      expertInformationSheet:null,//抽取条件描述
      affirmChange:{},//确认更换添加监控数据
      changeData:{},//更换监控数据
      isDisabled:false, // 控制重新抽取是否可以点击
    };
  },
  watch: {
    dialogShow(val) {
      //监听更换专家弹窗关闭时，调用详情接口
      if (val == false) {
        this.getDetails();
      }
    },
  },
  methods: {
    checkTab(id) {
      this.checkActive = id;
    },
    handleClose() {
      this.dialogShow=false;
      this.dialogVisible = false;
      this.approvalShow=false;
      this.expertShow=false;
      this.ruleForm={}
      this.changeForm={}
      this.approvalForm={}
    },
    //更换指定专家
    submitChange(){
      let data={
        reviewTaskId:this.$route.query.id,
        extractExpertId:this.extractExpertId,
        expertId:this.changeForm.expertIdList
      }
      console.log(data)
      getConfirmChange(data).then(res =>{
        if(res.code==200){
          this.$message({
            message: '专家更换成功',
            type: 'success'
          })
          this.expertShow=false;
          this.getDetails()
          this.changeForm.expertIdList=''
          this.$refs['changeFormRef'].resetFields();
        }
      })
    },
    //审批确定
    determine(){
      let data={
        extractExpertId:this.extractExpertId,
        status:this.approvalForm.approvalResult,
        reviewTaskId:this.$route.query.id,
      }
      this.$refs.approvalForm.validate((valid) => {
        if (valid) {
          getExtractExpertApproval(data).then(res =>{
            if(res.code==200){
              this.$message({
                message: '审批成功',
                type: 'success'
              })
            }
            this.getDetails()
            this.approvalShow=false
          })
        }
      })
      
    },
    open() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取详情
    getDetails() {
      let type = this.$route.query.type;
      let id = this.$route.query.id;
      // if (type && type == 1) {
        getDetailTask(id).then((res) => {
          if (res) {
            this.detailsData = res;
            this.tableData = res.extractRuleList;
            this.informationData = res.extractExpertList;
            this.infoArrData = res.expertCourseList;
          }
        });
      // } else {
      //   getExtractManageDetails(id).then((res) => {
      //     if (res) {
      //       this.detailsData = res;
      //       this.tableData = res.extractRuleList;
      //       this.informationData = res.extractExpertList;
      //       this.infoArrData = res.expertCourseList;
      //     }
      //   });
      // }
    },
    //规则专家列表
    getertList() {
      getUnextractedExpert(this.$route.query.id).then((res) => {
        // if (res.code == 200) {
          this.erxtList = res
        // }
        console.log(res);
      });
    },
    //专家信息操作
    clickDetails(row) {
      console.log(row);
      this.$router.push({
        path:'/tripartite/expert/expertview',
        query:{
          expertId:row.expertId
        }
      })
    },
    //弹窗编辑规则操作
    //编辑规则
    handleEdit(row) {
      if (row.show == false) {
        row.show = true;
      }
    },
    //临时更换规则
    changeIndicators(val) {
      val.extractRuleDesc = null;
      if (val.extracName == "年龄") {
        console.log(123);
        this.IndicatorsShow = false;
      } else {
        if (val == "性别") {
        }
        this.IndicatorsShow = true;
      }
      console.log(val);
    },
    //处理选择下拉数据
    processData(dataList, selectList) {
      let data = [];
      dataList.forEach((item) => {
        selectList.forEach((item1) => {
          if (item.dictLabel == item1) {
            data.push(item.dictValue);
          }
        });
      });
      return data;
    },
    //确定
    handleSure(row) {
      console.log(row);
      let name = row.extracName;
      row.data = [];
      if (name == "专业") {
        row.data = this.processData(this.majorList, row.extractRuleDesc);
        console.log(row);
      } else if (name == "擅长领域") {
        row.data = this.processData(this.areasList, row.extractRuleDesc);
      } else if (name == "技术职称") {
        row.data = this.processData(this.technicalList, row.extractRuleDesc);
      } else if (name == "职业资格") {
        row.data = this.processData(this.professionalList, row.extractRuleDesc);
      }
      if (row.extracName == "年龄") {
        if (row.age == "") {
          return this.$message.error("指标内容不能为空");
        } else {
          if (row.show == true) {
            row.show = false;
          }
        }
      } else {
        if (row.extractRuleDesc == "") {
          return this.$message.error("指标内容不能为空");
        } else {
          if (row.show == true) {
            row.show = false;
          }
        }
      }
    },
    // 新增一行条件
    addPerRow() {
      this.editPerDataList.push({
        extractType: "",
        extractRuleDesc: [],
        extracName: "",
        peopleNumber: "=",
        age: "",
        show: true,
      });
      this.editPerDataList.forEach((item, index) => {
        item.index = index;
      });
    },
    // 添加一行规则
    addRulesRow() {
      this.performanceRules.push({
        regulation: "",
        value: "",
        score: "",
        show: true,
        postRulation: "",
      });
    },
    // 删除一行规则
    deleteRow(index, rows) {
      rows.splice(index, 1);
      this.editPerDataList.forEach((item, index) => {
        item.index = index;
      });
    },
    cancelRules() {
      this.openRule = false;
    },
    //条件确定
    handleSureRule(row) {
      if (row.postRegulation == "") {
        return this.$message.error("请先选择条件");
      } else if (row.value == "") {
        return this.$message.error("请先输入参数");
      } else if (row.score == "") {
        return this.$message.error("请先选择得分");
      }
      if (row.postRegulation == "大于") {
        row.regulation = "0";
      } else if (row.postRegulation == "大于等于") {
        row.regulation = "1";
      } else if (row.postRegulation == "等于") {
        row.regulation = "2";
      } else if (row.postRegulation == "小于等于") {
        row.regulation = "3";
      } else if (row.postRegulation == "大于") {
        row.regulation = "4";
      }
      row.show = false;
    },
    // 显示规则弹窗按钮
    handRules(row) {
      this.clickIndex = row.index;
      this.title = "配置绩效指标-规则";
      this.openRule = true;
      this.performanceRules = row.performanceRules;
      console.log(this.editPerDataList);
    },
    //选择
    changeTab(val) {
      console.log(val);
    },
    //专家信息操作按钮
    handleClick(row) {
      this.dialogVisible = true;
    },
    // 当前行编辑按钮
    handleRowEdit(row) {
      switch (row.extractType) {
        case "专业":
          this.optionsArr = this.majorList;
          this.isMultiple = true;
          break;
        case "擅长领域":
          this.optionsArr = this.areasList;
          this.isMultiple = true;
          break;
        case "技术职称":
          this.optionsArr = this.technicalList;
          this.isMultiple = true;
          break;
        case "职业资格":
          this.optionsArr = this.professionalList;
          this.isMultiple = true;
          break;
        case "性别":
          this.optionsArr = this.sexList;
          this.isMultiple = false;
          break;
        case "政治面貌":
          this.optionsArr = this.politicalOutlook;
          this.isMultiple = false;
          break;
        case "年龄":
          this.IndicatorsShow = false;
          break;
        default:
          break;
      }
      row.show = true;
    },
    // extractType:'',//指标名称
        //选择专家
    selectExpert(row){
        let expertName=[]
        let name=this.erxtList.filter(item =>(this.ruleForm.expertIdList).indexOf(item.expertId)!=-1)
        name.forEach(item =>{
            expertName.push(item.expertName)
        })
        this.selectExpertList=expertName.join(',')
      
    },
    //提交 编辑规则 抽取按钮
    submit() {
      if(!this.ruleForm.extractType){
        this.$message.error('请选择抽取类型！')
      }else{
      // console.log(this.ruleForm)
      let obj = {};
      let extractRuleDesc=[]
      this.editPerDataList.forEach((item) => {
        extractRuleDesc.push((item.extracName + 
        (item.peopleNumber=='<'?'小于':item.peopleNumber=='>'?'大于':':')
        +((item.extractRuleDesc instanceof Array)?item.extractRuleDesc.join(','):item.extractRuleDesc)))
        this.perNameOptions.forEach((item1) => {
          if (item.extracName == item1.dictLabel) {
            console.log(item, item1);
            if (item1.dictValue == "sex") {
              obj[item1.dictValue] = item.extractRuleDesc == "男" ? 0 : 1;
            } else if (item1.dictValue == '"politicalOutlook"') {
              obj[item1.dictValue] = item.extractRuleDesc == "群众" ? 0 : 1;
            } else if (item1.dictValue == "age") {
              item.peopleNumber=='>'?obj.startAge=item.extractRuleDesc:item.peopleNumber=='='?obj.equalAge=item.extractRuleDesc:obj.endAge=item.extractRuleDesc
            } else {
              obj[item1.dictValue] = item.data;
            }
          }
        });
      });
      this.selecType=this.ruleForm.extractType
      if(this.ruleForm.extractType==1){
        this.extractRuleDesc=extractRuleDesc.join()
      }else {
        this.extractRuleDesc=this.selectExpertList
      }
      // console.log(obj)
      this.expertInformationSheet=obj
      this.ruleForm.expertInformationSheet=obj
      console.log(this.ruleForm)
      let data={
        reviewTaskId:this.$route.query.id,
        extractExpertId:this.extractExpertId,
        extractType:this.ruleForm.extractType,
      }
      if(this.ruleForm.extractType==3){
        data.expertId=this.ruleForm.expertIdList
      }
      if(this.ruleForm.extractType==1){
        data.expertInformationSheet=this.ruleForm.expertInformationSheet
      }
      if(this.ruleForm.extractType==3){
          this.erxtList.map(item =>{
            if(item.expertId==this.ruleForm.expertIdList){
              this.changeExpertInfo=item
            }
          })
          console.log(this.changeExpertInfo)
          this.dialogVisible=false;
          this.dialogShow=true
          console.log(data,1122);
          // 指定专家list(查询未抽取出来的专家)
          let dataExpertId = {
            expertId:data.expertId[0],
            extractExpertId:data.extractExpertId
          }
          getExtractRule(data.reviewTaskId,dataExpertId).then(res=>{console.log('指定专家list(查询未抽取出来的专家)',res);})
      }else{
        getModifyRule(data).then(res =>{
            this.dialogVisible=false;
            this.dialogShow=true
            this.changeExpertInfo=res
          
        })
      }
      this.selectExpertList=''
      this.temporaryData=data
      
      // this.ruleForm={}
      this.changeForm={}
      this.approvalForm={}
      }
    },
    //年龄输入框
    inputBlur(row) {
      console.log(row);
      row.extractRuleDesc = row.age;
      this.IndicatorsShow = true;
      console.log(row);
    },
    changeType() {
      console.log(this.ruleForm.extractType);
      if (this.ruleForm.extractType == 1) {
        this.editPerDataList = [
          {
            extractType: "",
            extracName: "专业",
            peopleNumber: "=",
            extractRuleDesc: [],
            age: "",
            show: false,
          },
          {
            extractType: "",
            extracName: "擅长领域",
            peopleNumber: "=",
            extractRuleDesc: [],
            age: "",
            show: false,
          },
          {
            extractType: "",
            extracName: "技术职称",
            peopleNumber: "=",
            extractRuleDesc: [],
            age: "",
            show: false,
          },
          {
            extractType: "",
            extracName: "职业资格",
            peopleNumber: "=",
            extractRuleDesc: [],
            age: "",
            show: false,
          },
        ];
      }
    },
    goBack() {
      this.$router.back();
    },
    //审批按钮
    handleExamine(row){
      this.extractExpertId=row.extractExpertId
      getExtractExpert(row.extractExpertId).then(res =>{
        console.log(res)
        this.approvalForm=res
        if(!res.applyReason){
          this.approvalForm.applyReason = '无'
        }
        this.getDetails()
        this.approvalShow=true
      })
    },
    // 重新更换/临时更换
    clickReplace(row){
      if(row.exchangeNum === '3'){
        this.$message.error('更换次数已用完，无法进行更换!')
      }else{
        this.checkNum = 0;
        let data={
            reviewTaskId:this.$route.query.id,
            extractExpertId:row.extractExpertId
          }
        if(row.type === '1' && row.againExtractNum === '3'){
          this.extractExpertId=row.extractExpertId
          this.isDisabled = true;
          getExchangeExpert(data).then(res =>{
            this.dialogShow=true
            this.changeExpertInfo=res
          })
        }else{
          this.dialogShow=false;
          if(row.type==1){
            this.getertList();
          }
          // this.ruleForm.extractType=row.extractType
          this.clickType=row.type
          this.extractExpertId=row.extractExpertId
          // this.expertId=row.expertId
          if(row.extractType==3){
            // if(row.type==1){
            //   this.expertShow=true
            //   this.changeForm.extractType=row.extractType
            // }
            if(row.type==0){
              this.selecType = null;
              this.expertShow=true
            }else{
              this.dialogVisible=true
            }
          }else{
            if(row.type==0){
              if(row.againExtractNum === '3'){
                this.isDisabled = true;
              }
              this.selecType = null;
              this.dialogShow=true
              if(this.checkNum<2){
                getExchangeExpert(data).then(res =>{
                    this.dialogShow=true
                    this.changeExpertInfo=res
                })
              }
            }else{
              this.dialogVisible=true
            }
          }
        }
      }
    },
    //更换专家，确认更换
    confirmChange(){
      // console.log(this.expertInformationSheet)
      let data={
        reviewTaskId:this.$route.query.id,
        extractExpertId:this.extractExpertId,
        expertId:this.changeExpertInfo.expertId,
        extractType:this.selecType,
        extractRuleDesc:this.extractRuleDesc,
        expertInformationSheet:this.expertInformationSheet
      }
      getConfirmChange(data).then(res =>{
        if(res.code==200){
          this.$message({
            message: '专家更换成功',
            type: 'success'
          })

          console.log(this.checkNum)
          let monitoring={
            monitoringDto:{
              exchangeType:this.checkNum,
              reviewTaskId:this.$route.query.id,
              extractExpertId:this.extractExpertId
            },
            expertDto:{
              expertId:this.changeExpertInfo.expertId,
              extractRuleDesc:this.extractRuleDesc,
            },
            ruleDto:{
              extractType:this.selecType
            }
          }
          this.monitoringAdd(monitoring)

          this.extractType=null
          this.extractRuleDesc=null
          this.expertInformationSheet=null
          this.getDetails()
          this.dialogShow=false;
          this.ruleForm={};
        }
      })
    },
    //重新抽取
    replaceChange(){
      this.checkNum+=1
      // if(this.checkNum>2){
      //     this.$message({
      //       type:'error',
      //       message:'重新抽取次数不能超过两次'
      //     }
      //   )
      //   return false
      // }
      // clickType 1 修改规则后，
      if(this.clickType==0){
        let data={
          reviewTaskId:this.$route.query.id,
          extractExpertId:this.extractExpertId
        }
        getExchangeExpert(data).then(res =>{
            this.dialogShow=true
            this.changeExpertInfo=res
          console.log(res)
        })
      }else{
        if(this.temporaryData.extractType==3){
          console.log('选择指定专家')
          this.dialogShow=false
          this.dialogVisible=true
          // this.ruleForm.extractType=this.temporaryData.extractType
          this.ruleForm.expertIdList=''
        }else{
          getModifyRule(this.temporaryData).then(res =>{
            console.log(res,'修改选规则后重新抽取')
            this.changeExpertInfo=res
          })
        }
      }
    },
    //抽取监控添加
    monitoringAdd(data){
      geMonitoringAdd(data).then(res =>{
          console.log(res)
      })
    }
    //临时更换
    // clickReplacement(row){
    //   console.log(row)
    //   getExchangeExpert().then(res =>{
    //   this.dialogShow=true
    //     console.log(res)
    //   })
    // }
  },
  created() {
    this.getDetails();
    this.getDicts("extract_type").then((res) => {
      this.extractTypeData = res.data;
    });
    //专业
    this.getDicts("major").then((res) => {
      this.majorList = res.data;
    });
    //技术职称
    this.getDicts("technical_type").then((res) => {
      this.technicalList = res.data;
    });
    //职业资格
    this.getDicts("professional_type").then((res) => {
      this.professionalList = res.data;
    });
    //擅长领域
    this.getDicts("areas_of_expertise").then((res) => {
      this.areasList = res.data;
    });
    
  },
};
</script>

<style lang="scss" scoped>
::v-deep .person-right {
  .el-descriptions-item__cell{
    span{
      position: relative;
      left: -20px;
    }
  }
}
.expert-draw-page {
  width: 100%;
  background: #f5f5f5;
  padding: 16px;
  .container-content {
    padding: 24px;
    background: #fff;
    .title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #000000;
      line-height: 18px;
      text-align: left;
      display: flex;
      justify-content: space-between;
      .back-btn {
        margin-right: 56px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        img {
          margin-right: 7px;
        }
      }
    }
    .table-content-box {
      // width:1600px;
      .add-btn {
        width: 110px;
        height: 32px;
        background: #3171ee;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #fff;
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        cursor: pointer;
        img {
          margin: 0 7px 0 17px;
          width: 14px;
          height: 14px;
        }
      }
    }
  }
  .table-box {
    margin: 24px 0;
    // height:48px;
    display: flex;
    flex-wrap: wrap;
    // width:1600px;
    & > :first-child {
      span {
        border-bottom: none;
      }
    }
    & > :nth-child(2) {
      span {
        border-bottom: none;
      }
    }
    & > div {
      width: 50%;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: CENTER;
      color: #666666;
    }
    .table-header {
      display: inline-block;
      width: 50%;
      height: 48px;
      background: #fafafa;
      line-height: 48px;
      text-align: center;
      border: 1px solid #ebebeb;
    }
    .table-body {
      display: inline-block;
      width: 50%;
      height: 48px;
      border: 1px solid #ebebeb;
      border-left: 0;
      text-indent: 24px;
      line-height: 48px;
    }
  }
  .right-title {
    // width: 1600px;
    height: 50px;
    line-height: 50px;
    display: flex;
    align-items: center;
    border: 1px solid #ebecef;
    border-right: 0;
    border-left: 0;
    margin: 24px 0;
    font-size: 14px;
    img {
      margin-right: 6px;
    }
  }
  .confirmed-box {
    // width:1600px;
    border-left: 1px solid #ebecef;
    position: relative;
    .confirmed-content {
      margin-left: 56px;
      // width: 1543px;
      height: 82px;
      padding: 16px 24px;
      background: #fafafa;
      border-radius: 4px;
      display: flex;
      position: relative;
      margin-top: 30px;
      .left-confirmed {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: LEFT;
        color: #999999;
        width: 226px;
        .left-title {
          font-weight: 400;
          color: #333333;
          margin-bottom: 10px;
        }
      }
      .right-confirmed {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: LEFT;
        color: #333333;
        display: flex;
        align-items: center;
        .rigth-title {
          margin-bottom: 10px;
          font-family: PingFang SC, PingFang SC-Regular;
        }
      }
      .right_btn {
        width: 74px;
        height: 32px;
        background: #ebf6ec;
        border-radius: 4px;
        position: absolute;
        right: 24px;
        line-height: 32px;
        color: #fff;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #33a83d;
      }
      .yuan {
        width: 14px;
        height: 14px;
        background: #ffffff;
        border: 3px solid #d0e2fb;
        border-radius: 50%;
        position: absolute;
        left: -63px;
        top: 0;
      }
    }
    .left-line {
      position: absolute;
      height: 68px;
      left: -1px;
      bottom: 0;
      width: 1px;
      background-color: #fff;
    }
  }
  .el-table__header {
    text-align: center;
  }
  .state-span {
    display: flex;
    align-items: center;
    .out-line {
      display: inline-block;
      width: 16px;
      height: 16px;
      // opacity: 0.1;
      background: rgba(49, 113, 238, 0.1);
      border-radius: 16px;
      margin-right: 10px;
      span {
        margin: 4px;
        width: 7px;
        height: 7px;
        background: #3171ee;
        border-radius: 16px;
        display: inline-block;
      }
    }
  }
  .person-info {
    display: flex;
    // width: 991px;
    // height: 206px;
    background: #ffffff;
    border: 1px solid #ecf2ff;
    padding: 24px;
    .person-left {
      margin-right: 60px;
      width:10%;
      .name-title{
        margin-top:10px;
        // text-indent:24px;
        text-align: center;
      }
    }
    .person-right {
      width:100%;
      .top-box {
        display: flex;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #999999;
        .right-top {
          width: 33%;
          div {
            margin-bottom: 10px;
            span {
              display: inline-block;
              margin-left: 10px;
              color: #333333;
            }
          }
        }
      }
      .bottom-box {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #999999;
        div {
          margin-bottom: 10px;
          span {
            display: inline-block;
            margin-left: 10px;
            color: #333333;
          }
        }
      }
    }
  }
  .resturn {
    background: #ffffff;
    border: 1px solid #3171ee;
    border-radius: 4px;
    color: #3171ee;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: CENTER;
  }
}
</style>
<style lang='scss'>
.info-select .el-input__inner {
  width: 158px !important;
}

.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}
/* 描述信息样式修改 */ 
.table-content-box{
  .el-descriptions__header{
    justify-content: center;
    height:48px;
    line-height: 48px;
    // margin-top: 15px;
    margin-bottom: 0px;
    background:#FAFAFA;
  }
  .el-descriptions__title {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color: #666666;
  } 
  .el-descriptions-item__label{
    width:400px;
    text-align: center !important;
  }
  .el-descriptions-item__content{
    text-align: center !important;
  }
  .el-input{
    text-align: left;
  }
  .el-input__inner{
    border: none;
  }
  .el-textarea__inner{
    border: none;
  }
  .el-rate{
    text-align: left;
  }
  .descriptions-item-content-box{
    text-align: left;
  }
}
.person-right{
  .descriptions-item-label{
    width:120px;
    border:none !important;
    background:none !important;
    padding:0;
  }
  .el-descriptions-itemcontent{
    min-width: 100px;
    border:none !important;
    text-align: left !important;
  }
}
.demo-ruleForm{
  .el-tag {
    background: #ecf2ff;
    border: 1px solid #a1c5f8;
    border-radius: 2px;
    font-size: 12px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color: #3171ee;
  }
  .el-tag.el-tag--info .el-tag__close{
      background:#3171ee !important;
      color:#FFF;
  }
}
</style>
